@use "../../vars.scss";

.play_queue_container {
  display: flex;
  overflow: visible;

  flex: 1 1 auto;
  flex-flow: column;

  .play_queue_items {
    display: block;
    flex: 1 1 auto;
    transition: vars.$short-duration;

    div {
      &:hover,
      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .file_dragged_over {
    display: flex;
    align-items: center;
    justify-content: center;
    background: vars.$background3;
    margin: 1rem;
    border: 6px dashed rgba(vars.$white, 0.8);

    *:not(i) {
      display: none;
    }
  }

  .track_dragged_over {
    background: vars.$background3;
  }

  .file_icon {
    font-size: 5em;
    align-self: center;
    pointer-events: none;
  }

  &.compact {
    .queue_menu_buttons {
      a:not(.compactButton) {
        display: none;
      }
    }

    .play_queue_items {
      div div::-webkit-scrollbar {
        width: 0 !important;
        display: none;
      }
    }
  }
}
